import {View, Text, Button as Button2,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert ,Image,Pressable,ImageBackground} from 'react-native';
import { styles} from '../MyStyle';
import {MyButton01, showToast} from '../UiComponents';

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './redux/actions';
import NativeLocalStorage from '../specs/NativeLocalStorage';

import { BackButton } from '../UiComponents';

import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { Center } from 'native-base';

// https://redux.js.org/introduction/getting-started
// npm install redux react-redux


export function DetailsScreen() {


 // 定义按钮点击事件
 const handleBackPress = (text:string) => {
  NativeLocalStorage?.finishActivity()
  Alert.alert('Back Button Pressed', `Text: ${text}`);
};

  return <ImageBackground 
  source={require('./../assets/bg.png')}
  style={{
padding:0/3.5,
  flex: 1,
backgroundColor:"#fff0000",
  }}>
<View style={styles.content}>
    <BackButton onPress={handleBackPress}
    />
      <View style={{
        flex:1,
        width:"100%",
        paddingTop:200/3.5,
        backgroundColor:"#00000000",
        flexDirection:"row", 
        alignItems:"flex-start",
        justifyContent: 'center', // 水平居中
      }}>

  <Pay1/>
  <View style={{width:200/3.5}}/>
  <Pay/>
      </View>
  </View>
  </ImageBackground>
  ;
}

function Pay1(){
return       <Pressable
style={({ pressed }) => [
  styles.button,
  { opacity: pressed ? 0.8 : 1 }, // 根据按下状态调整透明度
]}
onPress={() =>
  NativeLocalStorage?.gotoNext1()
  // showToast("hi")
  // alert('Button Pressed!')
}
>
<View style={styles.frame}>
<View style={{height:100/3.5}}></View>
<Image style={{
width:200/3.5,
height:200/3.5
}}  source={require('../assets/abc.png')} 
/>
<View style={{height:70/3.5}}></View>
<Text style={styles.text48}>进入3D场景替换</Text>
<View style={{height:21/3.5}}></View>
<Text style={styles.text20}>至大屏端选择任务进行</Text>
</View>
</Pressable>;
}

function Pay(){
  return       <Pressable
  style={({ pressed }) => [
    styles.button,
    { opacity: pressed ? 0.8 : 1 }, // 根据按下状态调整透明度
  ]}
  onPress={() => 
    NativeLocalStorage?.gotoNext2()
    // showToast("hi")
    // alert('Button Pressed!')
  }
  >
  <View style={styles.frame}>
  <View style={{height:100/3.5}}></View>
  <Image style={{
  width:200/3.5,
  height:200/3.5
  }}  source={require('../assets/qaw.png')} 
  />
  <View style={{height:70/3.5}}></View>
  <Text style={styles.text48}>进行渲染支付</Text>
  </View>
  </Pressable>;
  }
  
